<script>
import { defineComponent } from 'vue'
import { mapActions, mapState } from 'vuex'

export default defineComponent({
  name: 'AppBar',
  methods: {
    ...mapActions({
      resetAndClear: 'resetAndClear',
      setIsCreateFolderActivated: 'folder/setIsCreateFolderActivated',
      setFilter: 'filter/setFilter',
    }),

    onNewCategory() {
      this.filter.search = ''
      this.setIsCreateFolderActivated()
    },
  },
  computed: {
    /**
     * 是否启用了筛选
     */
    isFilter() {
      return this.filter.search
    },
    ...mapState({
      isImport: state => state.system.isImport,
      filter: state => state.filter,
    }),
  },
  watch: {
    filter: {
      handler(newVal) {
        const newFilter = {
          ...newVal,
          lastSearch: new Date().getTime(),
        }
        chrome.storage.local.set({
          filter: newFilter,
        })
      },
      deep: true,
    },
  },
  mounted() {
    chrome.storage.local.get('filter', res => {
      if (res.filter) {
        if (!res.filter.search) {
          return
        }

        // 上次搜索时间，如果大于两分钟，那么就清空搜索（搜索列表缓存只限2分钟，用于记录上次搜素的位置）
        const lastSearch = new Date(res.filter.lastSearch || 0)
        const currentTime = new Date() // 当前时间
        const diffMinutes = Math.abs(currentTime.getTime() - lastSearch.getTime()) / 1000 / 60

        if (diffMinutes > 2) {
          const clearFilter = {
            ...res.filter,
            search: '',
            lastSearch: 0,
            scroll: 0,
          }
          this.setFilter(clearFilter)
          chrome.storage.local.set({
            filter: clearFilter,
          })
        } else {
          this.setFilter(res.filter)
        }
      }
    })
  },
})
</script>

<template>
  <v-app-bar
    app
    :elevation="2"
  >
    <v-toolbar color="teal">
      <v-text-field
        v-model="filter.search"
        density="compact"
        :append-inner-icon="filter.search ? '' : 'mdi-magnify'"
        single-line
        hide-details
        label="Search Conversations"
        :clearable="true"
        class="mx-4"
        :readonly="!isImport"
        :disabled="!isImport"
      >
      </v-text-field>

      <v-btn
        icon="mdi-folder-plus"
        @click="onNewCategory"
        :disabled="!isImport || !!filter.search"
      ></v-btn>
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            icon="mdi-dots-vertical"
            v-bind="props"
          ></v-btn>
        </template>
        <v-list
          density="compact"
          :lines="false"
          :nav="true"
        >
<!--          <v-list-item-->
<!--            title="♻️ Rebuild Cache"-->
<!--            value="♻️ Rebuild Cache"-->
<!--            @click="rebuildCache"-->
<!--          >-->
<!--          </v-list-item>-->
          <v-list-item
            title="🗑️ Clear All Data"
            value="🗑️ Clear All Data"
            @click="resetAndClear"
          >
          </v-list-item>
        </v-list>
      </v-menu>
    </v-toolbar>
    <v-progress-linear
      model-value="10"
      color="light-blue"
      height="10"
      striped
    ></v-progress-linear>
  </v-app-bar>
</template>

<style scoped>

</style>
